<template>
	<view class="i-login">
		<view class="title flex-col padding-top-192 padding-left-74 color-white fw-500">
			<text class="lh-86 f-60">您好！</text>
			<text class="f-32 m-t-12 lh-46">欢迎来到政务系统</text>
		</view>
		<view class="content bgc-white round-32 padding-x-50 padding-bottom-90 m-t-60 margin-x-60 p-t-70">
			<view class="tabs flex-around-center lh-52 f-36 color-33 fw-500">
				<text class="tab-item pos-relative" :class="{'active-item': !type}" @click="type=0">
					手机号登录
				</text>
				<text class="tab-item pos-relative" :class="{'active-item': type}" @click="type=1">
					密码登录
				</text>
			</view>
			<form class="form" @reset="reset">
				<view class="input-item lh-40 m-t-50 round-999 p-t-26 p-b-24 p-l-40 p-r-30 flex-start-center">
					<text class="iconfont icon-shoujihao m-r-14 color-99"></text>
					<input class="flex-1" v-model="formData.phone" type="text" placeholder="请输入手机号"/>
				</view>
				<view v-if="!type" class="input-item lh-40 m-t-30 round-999 p-t-26 p-b-24 p-l-40 p-r-30 flex-start-center">
					<text class="iconfont icon-yanzhengyanzhengma m-r-14 color-99"></text>
					<input class="flex-1" v-model="formData.smsCode" type="text" placeholder="请输入验证码" />
					<view class="getcode w-160 text-align-center f-28 m-l-10" @click="getCode">
						发送验证码
					</view>
				</view>
				<view v-else class="input-item lh-40 m-t-30 round-999 p-t-26 p-b-24 p-l-40 p-r-30 flex-start-center">
					<text class="iconfont icon-yanzhengyanzhengma m-r-14 color-99"></text>
					<input class="flex-1" v-model="formData.password" type="text" placeholder="请输入密码" />
				</view>
				<view @click="submit" class="submit m-t-84 round-999 h-90 flex-center-center color-white f-32 fw-500">
					登录
				</view>
				<view v-if="!type" class="register color-99 m-t-28 f-28 lh-40 text-align-center">
					还没有账号？<text class="register-text">立即注册</text>
				</view>
				<view v-else class="unit lh-40 flex-between-center m-t-28 f-28 color-66 padding-x-20">
					<text @click="trouble">遇见问题</text>
					<text @click="forget">忘记密码</text>
				</view>
			</form>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from "vue"
	
	const type = ref(0)
	
	const formData = ref({
		phone: "",
		smsCode: "",
		password: ""
	})
	
	onLoad(()=>{
		
	})
	
	// 获取验证码
	function getCode(){
		
	}
	// 提交表单
	function submit(){
		if(!formData.value.phone){
			uni.showToast({
				title: "手机号不能为空！",
				mask: true,
				icon: "none",
				position: "center"
			})
			return
		}
		if(!formData.value.smsCode){
			uni.showToast({
				title: "验证码不能为空！",
				mask: true,
				icon: "none",
				position: "center"
			})
			return
		}
		console.log(formData.value)
	}
	// 清空表单
	function reset(){
		
	}
	// 遇见问题
	function trouble(){
		
	}
	// 忘记密码
	function forget(){
		
	}
	function capError(){
		
	}
</script>

<style lang="scss" scoped>
.i-login{
	width: 100%;
	height: 100%;
	background: linear-gradient(180deg, #5C98F8 0%, #5C98F8 25.93%, #5BB9F7 100%);
	.title{
		text-shadow: 0px 3px 6px  #1054B7;
	}
	.content{
		box-shadow: 0px 3px 6px  #046FC3;
		.tabs{
			.active-item{
				color: #409EFE;
				&::after{
					content: "";
					position: absolute;
					width: 60rpx;
					height: 4rpx;
					background-color: #409EFE;
					bottom: -3rpx;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
		}
		.form{
			.input-item{
				background-color: #F5F7FB;
				.getcode{
					border-left: 1px solid #cdcdcd;
					color: #409EFE;
				}
			}
			.submit{
				background-color: #409EFE;
			}
			.register{
				.register-text{
					color: #409EFE;
				}
			}
		}
	}
}
</style>
